<template>
    <div class="page">
        <div class="title-box">
            <van-image
                round
                :src="user.headimgurl"
                :show-error="true"
                :error-icon="require('@/assets/err.jpg')"
                class="user-icon"
            />
            <p>{{user.nickname}}</p>
        </div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div class="content">
                {{myfundrais.len}}
                <div class="myfundrais__content" v-if="myfundrais.length>0">
                    <div class="myfundrais__piece" v-for="(item,index) in myfundrais" :key="index">
                        <div class="piece__top">
                            <p>筹款发起时间：{{ item.prepare_start_time}}</p>
                        </div>
                        <div class="piece__center" @click="toDetail(item.prepare_id)">
                            <!-- <img
                                
                            /> -->
                            <van-image
                                :src="'http://user-prepare.oss-cn-beijing.aliyuncs.com/' + item.prepare_pic_url.split(',')[0]"
                                :show-error="true"
                                :error-icon="require('@/assets/err.jpg')"
                                class="img"
                            />
                            <div class="raises__piece__content__text">
                                <h5>{{item.prepare_title}}</h5>
                                <div class="progress-box">
                                    <van-progress
                                        pivot-text
                                        color="#ff5e10"
                                        :percentage="item.total/item.prepare_money"
                                    />
                                </div>
                                <div class="moneybox">
                                    <p class="money--achieve">
                                        已筹
                                        <span>{{item.total}}</span>元
                                    </p>
                                    <p class="money--target">
                                        目标
                                        <span>{{item.prepare_money}}</span>元
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="piece__bottom">
                            <span class="type">{{item.status_desc}}</span>
                            <van-button
                                round
                                color="#ff3c3c"
                                @click="toCashOut(item.prepare_id)"
                                size="small"
                            >提现</van-button>
                        </div>
                    </div>
                </div>
                <div class="myfundrais__nodata" v-else>
                    <img src="@/assets/nodata.png" />
                    <h4>暂时没有筹款记录</h4>
                    <p class="nodata-button" @click="toInitiate()">我也要筹款</p>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script>
import { Progress, List, Button, Image } from "vant";
import { customerInfo, userFundraisingList } from "@/api/api";
export default {
    components: {
        [Progress.name]: Progress,
        [List.name]: List,
        [Button.name]: Button,
        [Image.name]: Image
    },
    data() {
        return {
            user: {},
            myfundrais: [],
            page: 1,
            loading: false,
            finished: true
        };
    },
    created() {
        customerInfo().then(res => {
            if (res.code) {
                this.user = res.results;
            } else {
                Toast(res);
            }
        });
        this.getData();
    },
    methods: {
        onLoad() {
            this.page++;
            this.getData();
        },
        getData() {
            this.loading = true;
            userFundraisingList({ pageNum: this.page }).then(res => {
                if (res.code) {
                    for (let i of res.results) {
                        this.myfundrais.push(i);
                    }
                    if (res.results.length > 0) {
                        this.finished = false;
                    } else {
                        this.finished = true;
                    }
                    this.loading = false;
                } else {
                    Toast(res);
                }
            });
        },
        toDetail(id) {
            this.$router.push({
                path: "/Detail",
                query: { id: id }
            });
        },
        toCashOut(id) {
            this.$router.push({
                path: "/CashOut",
                query: { id: id }
            });
        },
        toInitiate() {
            this.$router.push({ path: "/Initiate" });
        }
    }
};
</script>

<style scoped>
</style>